! function (window) {
	
	 ThScroll = {
	    /*
	     * 属性
	     */
		version: "0.0.1",
		cMaxWidth:0,  //容器宽
		cMaxHeight:0, //容器高
		
        zIndex_Container: 1,
		maxImagesWidth:1000,
		initEventFlag:0,
		imgsWidth:0,
		
		/*
		 * 事件回调函数
		 */
		imgItemClickCb:null,
		playBtnClickCb:null,
		
		initEvent: function (selector){
			if(ThScroll.initEventFlag>0)
				return;
			ThScroll.initEventFlag++;
			
			$(selector).on("click",".mTSButtonLeft",function(){ 
				
				//var offset = $("#mTS_1_container").offset();
				//var offset = $(this.parentElement).find(".mTSContainer").offset();
				var left =  $(this.parentElement).find(".mTSContainer").position().left;
				
				console.log(left);
				
				//console.log(this);
				
				left += 100;
				if(left>=0){
					left=0;
					
					//隐藏 
					if(!$(selector + " .mTSButtonLeft").hasClass("mTS-hidden")){
						$(selector + " .mTSButtonLeft").addClass("mTS-hidden");
					}
				}
				$(this.parentElement).find(".mTSContainer").css("left",left+"px");
				//$("#mTS_1_container").css("left",left+"px");
				
				
//				if(left >= ThScroll.maxImagesWidth){
//					if($(selector + " .mTSButtonRight").hasClass("mTS-hidden")){
//						$(selector + " .mTSButtonRight").removeClass("mTS-hidden");
//					}
//				}else{
//					$(selector + " .mTSButtonRight").addClass("mTS-hidden");
//				}
				
			});
			
			$(selector).on("click",".mTSButtonRight",function(){ 
				
				//var offset = $("#mTS_1_container").offset();
				//offset 方法返回或设置匹配元素相对于文档的偏移（位置）
				//var offset = $(this.parentElement).find(".mTSContainer").offset();
				
				//返回一个字符串0px
				//var left =  $(this.parentElement).find(".mTSContainer").css('left');
				var left =  $(this.parentElement).find(".mTSContainer").position().left;
				//var top = offset.top;
				
				//console.log(this);
				console.log(left);
				left -= 100;
				if(left>=0){
					left = 0;
				}
				//$("#mTS_1_container").css("left",left+"px");
				$(this.parentElement).find(".mTSContainer").css("left",left+"px");
				
				if(left>=0){
					//隐藏
					if(!$(selector + " .mTSButtonLeft").hasClass("mTS-hidden")){
						$(selector + " .mTSButtonLeft").addClass("mTS-hidden");
					}
				}else{
					//显示
					if($(selector + " .mTSButtonLeft").hasClass("mTS-hidden")){
						$(selector + " .mTSButtonLeft").removeClass("mTS-hidden");
					}
				}
				
			});
			
			$(selector).on("click","li a img",function(){ 
				//console.log(this);
				
				var obj={};
				
				obj.video = $(this).attr('video');
				obj.image = $(this).attr('src');
				
				if(ThScroll.imgItemClickCb!=null && ThScroll.imgItemClickCb!= undefined)
					ThScroll.imgItemClickCb(obj);
			});
			
			//JS代码动态添加的，这时候我们又需要监听a标签的点击事件
			//由此我们需要通过对非动态父标签或者祖先级标签来监听子标签实现
			$(selector).on("click",".icon-play",function(){ 
				var obj={};
				
				obj.video = $(this.parentElement.parentElement.parentElement).find(".mTSThumb").attr('video');
				obj.image = $(this.parentElement.parentElement.parentElement).find(".mTSThumb").attr('src');
				
				if(this.classList.contains('play')){
					this.classList.remove('play');
					var data = this.getAttribute('data-play');
					
					console.log(data);
					
					for(var i=0;i<this.children.length;i++){
						if(this.children[i].nodeName == 'path'){
							$(this.children[i]).attr("d",data);
						}
					}
					
					obj.isPlay = 0;
				}else{
					this.classList.add('play');
					
					var data = this.getAttribute('data-pause');
					
					console.log(data);
					for(var i=0;i<this.children.length;i++){
						if(this.children[i].nodeName == 'path'){
							$(this.children[i]).attr("d",data);
						}
					}
					
					obj.isPlay = 1;
				}
				
				if(ThScroll.playBtnClickCb!=null && ThScroll.playBtnClickCb!= undefined)
					ThScroll.playBtnClickCb(obj);
				
				
			});
			
		},
		getNaturalWidth: function (img) {
		    var image = new Image();
		    image.src = img.src;
		    var naturalWidth = image.width;
		    return naturalWidth;
		},
		
		
		calcImgLoadedCb: function (selector,cW,imgH,size){
			ThScroll.imgsWidth += parseInt(imgH * size.width/size.height);
			ThScroll.imgsWidth += 8;
			
			console.log("imgsWidth:"+ThScroll.imgsWidth+"  ,cW:"+cW);
			if(ThScroll.imgsWidth > cW){
				$(selector + " .mTSButtonRight").removeClass("mTS-hidden");
			}
			
		},
		
		showRightBtn: function (selector,cW,imgH,img) {
		    var image = new Image();
		    image.src = img.src;
		    
		    //有个异步的问题图片需要加载成功才能获取宽高
		    image.onload = function() {		    	
		    	ThScroll.calcImgLoadedCb(selector,cW,imgH,{width:image.width,height:image.height});
	        }
		},
		initFromJsonArr: function (arr, param) {
			if(arr.length<=0 || param.selector==undefined){
				return;
			}
			
			var selector = param.selector;
			
			ThScroll.imgItemClickCb = param.imgItemClickCb;
			ThScroll.playBtnClickCb = param.playBtnClickCb;
			ThScroll.cMaxWidth = param.cMaxWidth;
			ThScroll.cMaxHeight = param.cMaxHeight;
			
			if(ThScroll.cMaxHeight != undefined && ThScroll.cMaxHeight !=0){
				$(selector).height(ThScroll.cMaxHeight);
			}
			
			if(ThScroll.cMaxWidth != undefined && ThScroll.cMaxWidth !=0){
				$(selector).width(ThScroll.cMaxWidth);
			}
			
			//容器的高度
			var cH = $(selector).height();
			//计算图片宽度
		
			$(selector).addClass("mThumbnailScroller _mTS_" + ThScroll.zIndex_Container);
			$(selector).addClass("mTS-none");
			
			var html = '';
			
			html += '<div id="mTS_'+ThScroll.zIndex_Container + '" class="mTSWrapper mTS_horizontal">';
			
			html += '<ul class="mTSContainer" id="mTS_' + ThScroll.zIndex_Container + '_container" style="position: relative; top: 0px; left: 0px; width: 2946px;">';
			
			for(var i=0;i<arr.length;i++){
				var videoFlag = '';
				
			
				if(arr[i].image==undefined){
					html += '<li class="mTSThumbContainer"><a href="#"><img src="" class="mTSThumb"';
				}else{
					html += '<li class="mTSThumbContainer"><a href="#"><img src="'+arr[i].image+'" class="mTSThumb"';
				}
				
				if(arr[i].video!=undefined){					
					html += ' video="' + arr[i].video + '"';
				}
				html += '></a>';
				
				
				if(arr[i].video!=undefined){
					html += '<a href="#" class="mTSButton mTSButtonCentor"><span class="mTSButtonIconContainer">'
								+'<svg version="1.1" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" class="mTSButtonIcon icon-play"'
								+' data-play="M 6,24 24,12 24,12 6,0 z M 6,24 24,12 24,12 6,0 z"' 
								+' data-pause="M 6,24 9,24 9,0 6,0 z M 15,24 18,24 18,0 15,0 z" '
								+' >'
								+' <g><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line></g>'
								+' <path d="M 6,24 24,12 24,12 6,0 z M 6,24 24,12 24,12 6,0 z"></path>'
								+' </svg></span></a>';
				}
			}
			
			html += '</ul>';
			html += '<a href="#" id="mTS_1_buttonLeft" class="mTSButton mTSButtonLeft mTS-hidden"><span class="mTSButtonIconContainer"><svg version="1.1" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" class="mTSButtonIcon"><g><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line></g><path d="M9.439 3.439l-7.5 7.5c-0.586 0.586-0.586 1.536 0 2.121l7.5 7.5c0.586 0.586 1.536 0.586 2.121 0s0.586-1.536 0-2.121l-4.939-4.939h14.379c0.828 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5h-14.379l4.939-4.939c0.293-0.293 0.439-0.677 0.439-1.061s-0.146-0.768-0.439-1.061c-0.586-0.586-1.536-0.586-2.121 0z"></path></svg></span></a>';
			html += '<a href="#" id="mTS_1_buttonRight" class="mTSButton mTSButtonRight mTS-hidden"><span class="mTSButtonIconContainer"><svg version="1.1" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" class="mTSButtonIcon"><g><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line></g><path d="M14.561 20.561l7.5-7.5c0.586-0.586 0.586-1.536 0-2.121l-7.5-7.5c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121l4.939 4.939h-14.379c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5h14.379l-4.939 4.939c-0.293 0.293-0.439 0.677-0.439 1.061s0.146 0.768 0.439 1.061c0.586 0.586 1.536 0.586 2.121 0z"></path></svg></span></a></div>';
			html += '</div>';
			
			$(selector).html(html);
			
			//-8 .mThumbnailScroller li margin: 4px;
			var imgH = cH-8;
			$(selector + " li a img").css("height",imgH+"px");
			
			var imgs = $(selector + " li a img");
			for(var i=0;i<imgs.length;i++){
				ThScroll.showRightBtn(selector,$(selector).width(),imgH,imgs[i]);
			}
			
			ThScroll.zIndex_Container++;
			
			ThScroll.initEvent(selector);
		}
	 }
	
	
}(window)